<template>
  <div>
    <el-row type="flex" justify="space-between" align="middle">
      <el-form :inline="true" :model="query" style="height:36px;">
        <el-form-item label="选择部门组织机构:">
          <el-cascader
            ref="cascader"
            style="width:300px;"
            v-model="departMajor"
            :options="departMajorOptions"
            :props="departMajorProps"
            @change="changeDepartMajor"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="选择年份：">
          <el-date-picker
            v-model="query.date"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div>
        <el-button style="flex-shrink:0;" type="primary" size="small" @click="loadTable" :disabled="loading">查询</el-button>
        <el-button style="flex-shrink:0;" type="primary" size="small" @click="onExport" :disabled="loading">导出</el-button>
      </div>
    </el-row>
    <el-table v-loading="loading" :data="tabelData" ref="table" style="margin-top: 10px" :show-summary="true">
      <template v-for="(column, columnIndex) in tableColumn">
        <el-table-column
          align="center"
          :label="column.label"
          :prop="column.prop"
          :fixed="column.fixed"
          :width="column.width"
          :key="columnIndex"
        >
          <template v-for="(column2, columnIndex2) in column.children">
            <el-table-column align="center" :label="column2.label" :prop="column2.prop" :key="columnIndex2"> </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import { juanCourseTotal,getStatisticsByTotal } from "@/api/juan/juanQuestionRepos";
import { getDeptTree } from "@/api/system/user";
import exportTableAsXLSX from "@/utils/exportTableAsXLSX.js";
export default {
  name: "JuanReposStatistics",
  data() {
    return {
      loading: false,
      tabelData: [],
      tableColumn: [],
      departMajor: null,
      departMajorOptions: null,
      departMajorProps: {
        //label: 'treeName',
        label: "label",
        value: "id",
        checkStrictly: true
      },
      defaultProps: {
        children: "children",
        label: "treeName",
      },
      cascader: {},
      query:{
        department:null,
        date:null
      }
    };
  },
  created() {
    this.loadTable();
    this.getDepartMajorOptions();
  },
  methods: {
    /** 查询树结构 */
    getDepartMajorOptions() {
      getDeptTree().then((response) => {
        this.departMajorOptions = response.data;

        let department = null,
          departId = null,
          majorId = null,
          courseId = null;

        if (response.data && response.data.length > 0) {
          department = response.data[0].id;
          const second = response.data[0].children;
          if (second.length > 0) {
            departId = second[0].id;
            const third = second[0].children;

            //三级
            if (third && third.length > 0) {
              majorId = third[0].id;
              this.departMajor = [department, departId, majorId];
              const fourth = third[0].children;

              //四级
              if (fourth && fourth.length > 0) {
                courseId = fourth[0].id;
                this.departMajor = [department, departId, majorId, courseId];
              }
            }
          }
        }
      });
    },
    changeDepartMajor(val){
      if(val && val.length > 0){
        this.query.department = val[val.length - 1];
      }
    },
    loadTable() {
      this.loading = true;
      getStatisticsByTotal(this.query)
        .then((res) => {
          this.tabelData = res.data.map((item) => {
            let options = { ...item };
            for (let i = 0; i < item.tjuanTkVOList.length; i++) {
              let cItem = item.tjuanTkVOList[i];
              for (let j = 0; j < cItem.list.length; j++) {
                let dItem = cItem.list[j];
                options[cItem.dictType + dItem.dictName] = dItem.count;
              }
            }

            return options;
          });

          let dynamicColumn = [];
          if (res.data.length > 0) {
            dynamicColumn = res.data[0].tjuanTkVOList.map((item) => {
              return {
                label: item.name,
                prop: item.dictType,
                children: item.list.map((sItem) => {
                  return {
                    label: sItem.name,
                    prop: item.dictType + sItem.dictName,
                  };
                }),
              };
            });
          }

          this.tableColumn = [
            {
              label: "题库",
              prop: "tkName",
              width: "100px",
              fixed: "left",
            },
            ...dynamicColumn,
          ];

          this.doLayout();

          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    doLayout() {
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.$refs.table.doLayout();
        }
      });
    },
    onExport() {
      exportTableAsXLSX(this.$refs.table, {
        fileName: "题库汇总统计",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
